<template>
    <div class="search_part">
        <span>搜索: </span>
        <el-input :placeholder="plh_a" class="input"></el-input>
        <el-input :placeholder="plh_b" class="input"></el-input>
        <el-button class="button" type="primary" icon="el-icon-search" size="mini">搜索</el-button>
        <el-button class="button" type="primary" icon="el-icon-plus" size="mini" @click="addData">添加</el-button>

        <!-- 添加弹框组件 -->
        <el-dialog
        title="添加"
        :visible.sync="$store.state.dialogWares"
        width="30%">
        <el-form label-width="120px" :model="data" :rules="rules" ref="form">
            <el-form-item :label="name[0]" prop="name">
                <el-input v-model="data.name" ></el-input>
            </el-form-item>
            <el-form-item :label="name[1]" prop="code">
                <el-input v-model="data.code"></el-input>
            </el-form-item>
            <el-form-item class="btns">
                <el-button @click="$store.state.dialogWares = false">取 消</el-button>
                <el-button type="primary" @click="subDialog">确 定</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>

    </div>
    
</template>

<style lang="scss">
    .search_part {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        span {
            font-size: 15px;
            margin-right: 20px;
        }
        .input  {
            width: 180px;
            margin-right: 20px;
            .el-input__inner {
                height: 32px;
            }
        }
        .button {
            padding: 8px 0px;
            i {
                margin-left: 7px;
            }
        }
        .el-dialog {
            .el-form{
                .el-input {
                    width: 85%;
                }
                .btns {
                    text-align: right;
                    margin-right: 60px;
                }
            }
       }

    }    
</style>

<script>
import Dialog from "@c/Dialog";
export default {
    components: { Dialog },
    data() {
        return {
            // 添加弹窗
            dialogWares: false,
            data: {},
            rules: {
                name:[{required: true, trigger: 'blur' ,  message: '请输入内容'}],
                code:[{required: true, trigger: 'blur' ,  message: '请输入内容'}],
            }

        }
    },
    props: ['plh_a', 'plh_b', 'list', 'url', 'name'],
    created () {
            this.$store.commit('dialogWares', this.dialogWares)
    },
    methods: {
        addData() {
             this.$store.state.dialogWares = true;
        },
        subDialog() {
            this.$store.state.dialogWares = false
            this.$refs.form.validate(valid => {
                if(valid) {
                    this.$http.post(this.url, {data: this.data})
                        .then(({ data }) => {
                            if(!data.errno) {
                                this.$message({
                                message: data.msg,
                                type: 'success'
                            })
                                setTimeout(() => {
                                    this.$router.go(0)
                                },1000)
                            }
                        })
                }
            })
        }

    }
}
</script>